<template>
  <div class="container">
    <div class="top">
      <img src="../../../assets/img/temfile/logo1.jpg" alt="">
      <p>择校宝</p>
    </div>
    <div class="center">
      <label for="name">
        <input type="text" placeholder="用户名">  
      </label>      
      <label for="password">
        <input type="password" placeholder="密码">
      </label>
      <label for="confirmPassword">
        <input type="confirmPassword" placeholder="确认密码">
      </label>
    </div>
    <a href="javascript:;"  @click="handzhuandao()">已有账号去登陆</a>
    <button >注册</button>
    <p>-----------其他注册方式-----------</p>
    <div class="other">
      <i class="fa fa-qq fa-lg" aria-hidden="true" style="color:green"></i>
      <i class="fa fa-weixin fa-lg " aria-hidden="true"></i>
      <i class="fa fa-github-square fa-lg" aria-hidden="true" style="color:pink"></i>
      <i class="fa fa-facebook fa-lg" aria-hidden="true" style="color:blue"></i> 
    </div>
  </div>
</template>

<script>
export default {
  name:'Login',
  data(){
    return{
      
    }
  },
  methods:{
    handzhuandao(e){
      // this.$emit(tofather)
    }
  },
}
</script>

<style scoped>
.container{
    height: 600px;
    width: 100%;
    /* min-width: 300px;
    width: 32%; */
    /* border: 1px solid; */
    margin: 0px auto;
    border-radius: 10px;
    text-align: center;
    box-shadow:  0 0 15px 1px;
    padding-top: 10px;
}
.container>top{
  margin-top: 20px;
}
.container img{ 
  height: 120px;
  width: 150px;
  border-radius: 50%;
  overflow: hidden;
  transition: all linear .5s;
}
.container img:hover{
  transform:rotate(360deg);
  width: 120px;
}
.top>p{
  font-size: 24px;
  font-family: 'xin';
  color: cornflowerblue;
}
.container label{
  display: block;
}
.container input{
  width: 80%;
  height: 30px;
  margin-top: 30px;
  border: none;
  border-bottom: 1px solid burlywood;
}
.container>a{
  display: block;
  margin-top: 10px;
  text-align: end;
  width: 90%;
  transition: all linear .3s;
}
.container>a:hover{
  color: brown;
}
button{
  width: 80%;
  height: 30px;
  border: none;
  margin: 40px;
  border-radius: 10px;
  background-color: cadetblue;
  transition: all linear .3s;
}
button:hover{
  background-color: rgb(158, 152, 127);
}
.other{
  width: 60%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  
}
.other>i{
  transition: all linear .3s;
}
.other i:hover{
  transform: scale(1.2);
}
</style>